<div class="pageHeader">
    <form class="" id="orderSearch">
        <div class="row">
            <div class="col">
              <input type="text" name="orderId" class="form-control" placeholder="请填写订单号/客户/类型">
            </div>
            <div class="col input-group">
                <input type="text" id="config-demo" class="form-control" placeholder="请选择时间段">
            </div>
            <div class="col">
              <button type="button" class="btn btn-success" onclick="search_from()">搜索</button>
              <button type="reset" class="btn btn-warning ">重置</button>
            </div>
        </div>
    </form>
</div>
<div class="pageContent">
     <div id="toolbar" class="btn-group mr1" role="group" aria-label="Basic example">
                <button type="button" class="btn btn-success" onclick="order_list_add()" title="添加"><i class="glyphicon glyphicon-plus"></i></button>
                <button type="button" class="btn btn-info" onclick="order_list_edit_info()"  title="修改基本信息"><i class="glyphicon glyphicon-edit"></i></button>
                <button type="button" class="btn btn-violet" onclick="order_list_control(0)" title="开始"><i class="glyphicon glyphicon-play"></i></button>
                <button type="button" class="btn btn-info" onclick="order_list_control(1)" title="暂停"><i class="glyphicon glyphicon-pause"></i></button>
                <button type="button" class="btn btn-danger" onclick="order_list_control(2)" title="关闭"><i class="glyphicon glyphicon-remove"></i></button>
     </div>
     <table id="ArbetTable" style="table-layout: fixed;word-wrap:break-word;word-break:break-all;"></table>
</div>
<script type="text/javascript">
  $(function () {

     var locale = {
            "format": 'YYYY/MM/DD',
            "separator": " - ",
            "applyLabel": "确定",
            "cancelLabel": "取消",
            "fromLabel": "起始时间",
            "toLabel": "结束时间'",
            "customRangeLabel": "自定义",
            "weekLabel": "W",
            "daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
            "monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            "firstDay": 1
        };
    $('.selectpicker').selectpicker();//初始化
       $('#config-demo').daterangepicker({
        "linkedCalendars": false,
        "autoUpdateInput": false,
        "showCustomRangeLabel": false,
        'locale': locale
    }, function(start, end, label) {
        $('#config-demo').val(start.format('YYYY/MM/DD')+'-'+end.format('YYYY/MM/DD'));
    });
       
    $('#ArbetTable').bootstrapTable({
            url: '/order/getloadinglist',         //请求后台的URL（*）
            method: 'post',                      //请求方式（*）
            toolbar: '#toolbar',                //工具按钮用哪个容器
            //buttonsToolbar: '#buttons-toolbar', 
            toolbarAlign:'left',
            buttonsAlign:'left',
            striped: false,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: true,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            queryParams: queryParams,//传递参数（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            //search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            contentType: "application/x-www-form-urlencoded",
            strictSearch: true,                 //启用严格搜索
            showColumns: true,                  //是否显示所有的列
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            height: 700,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "id",                     //每一行的唯一标识，一般为主键列
            //showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            //showHeader:true,
            //showPaginationSwitch:true,
            clickToSelect:true,                //设置 true 将在点击行时，自动选择 rediobox 和 checkbox。
            maintainSelected:true,             //   设置为 true 在点击分页按钮或搜索按钮时，将记住checkbox的选择项。
            sortStable:true,                  //设置为 true 将获得稳定的排序，我们会添加\_position属性到 row 数据中。
            singleSelect:true,
            columns: [
            {
                checkbox: true,
                visible: true
            },
            {
                field: 'id',
                title: '序号',
            }, {
                field: 'orderId',
                title: '订单号'
            },
            {
                field: 'customer',
                title: '客户'
            },
            {
                field: 'firmwareVersion',
                title: '固件版本'
            }, {
                field: 'hardwareVersion',
                title: '硬件版本'
            }, {
                field: 'softVersion',
                title: '软件版本'
            }, {
                field: 'type',
                title: '产品',
                formatter:chanping
            },{
                field: 'beginWaterDivision',
                title: '开始水司号'
            }, {
                field: 'endWaterDivision',
                title: '结束水司号'
            }
            , {
                field: 'deviceNum',
                title: '数量'
            }
            , {
                field: 'bus',
                title: '母线',
                width: 225
            }
            ,{
                field: 'productConfig',
                title: '产品配置',
                formatter:productFormatter
            }
            ,{
                field: 'status',
                title: '状态',
                formatter:statusFormatter
            }
            ,{
                field: 'createDate',
                title: '创建时间',
                width:100
                // formatter:statusFormatter
            },
            {
                field: 'operate',
                title: '操作',
                formatter:operateFormatter
            }
            ],
            rowStyle: function (row, index) {
                var classesArr = ['success', 'info'];
                var strclass = "";
                if (index % 2 === 0) {//偶数行
                    strclass = classesArr[0];
                } else {//奇数行
                    strclass = classesArr[1];
                }
                return { classes: strclass };
            },//隔行变色
            onLoadSuccess: function(data){    
                if(data.statusCode === 300){
                    toastr.warning(data.message);
                }
            }
    })
  })

function queryParams(params){
   var formData=  $("#orderSearch").getFormData()
     formData.status=0;
    var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
        pageSize: params.limit,   //页面大小
        pageCurrent:params.offset, //页码
    };
  return $.extend({},temp,formData);
}

function search_from(){
    $('#ArbetTable').bootstrapTable('refresh',{query: $("#orderSearch").getFormData()});
 }  

function  chanping(value, row, index){
  if(value){
    return value.pn;
  }else {
     return '-';
  }
}

function productFormatter(value, row, index){
    if(row.configEntity){
    return row.configEntity.name;
   }else{
    return "-";
   }
 }

 function statusFormatter(value, row, index){
     if (value==0) {
            // return "完结";
            return '<span title="完结" class="overTag"><i class="fa fa-check"></i></span>'
     }else if(value==1){
            // return "未开始";
            return '<span title="未开始" class="notBeginTag"><i class="fa fa-play"></i></span>'
     }else if(value==4){
            // return "暂停";
        return '<span title="暂停" class="pauseTop"><i class="fa fa-pause"></i></span>'
     }else if(value==3){
        //   return "进行中";
        return '<span title="进行中" class="loadingTag"><i class="fa fa-spinner"></i></span>'
     }else{
        return "-";
     }
 }
 
function operateFormatter(value, row, index) {//赋予的参数
    return [
         '<a class="btn active" style="margin-top: 1px;margin-bottom: 1px;color: #fff;width: 80px;background-color: #1ab667;border-color:#1ab667;"  title="子订单详情"  onclick="childOrderDetails(event,\''+row.orderId+'\')" ><i class="fa fa-eye"></i>子订单</a><a class="btn active"  style="margin-top: 1px;margin-bottom: 1px;color: #fff;width: 80px;background-color: #4cb6cb;border-color: #4cb6cb;"  title="生产详情"  onclick="orderDetails(event,\''+row.orderId+'\')" ><i class="fa fa-eye"></i>生产</a><a class="btn active"   style="margin-top: 1px;margin-bottom: 1px;color: #fff;width: 80px; background-color: #545ca6;border-color:#545ca6;"  title="工序详情"  onclick="processOrderDetails(event,\''+row.orderId+'\',\''+row.processSchemeId+'\')" ><i class="fa fa-eye"></i>工序</a><a class="btn active"  style="margin-top: 1px;margin-bottom: 1px;color: #fff;width: 80px;background-color: #f1c90f;border-color: #f1c90f;padding-left: 4px;"   title="工序统计" onclick="processCounts(event,\''+row.orderId+'\')" ><i class="fa fa-bar-chart"></i>工序统计</a>'
    ].join('');
}

function orderDetails(event,id){
    $('.breadcrumb').replaceWith('<ol class="breadcrumb"><li class="breadcrumb-item">订单</li><li class="breadcrumb-item open" aria-current="page"><a href="/order/loadinglist">进行中订单</a></li>');                          //导航栏添加三级导航
    $("div.pageHeader").css("display","none");
    $('.content-container').ajaxUrl({'url':'/order/orderDetails','data':{'orderId':id}});  
}
function childOrderDetails(event,id){
    $('.breadcrumb').replaceWith('<ol class="breadcrumb"><li class="breadcrumb-item">订单</li><li class="breadcrumb-item open" aria-current="page"><a href="/order/loadinglist">进行中订单</a></li>');                       
    $('.content-container').ajaxUrl({'url':'/order/childOrderDetails','data':{'orderId':id}}); 
}
function processOrderDetails(event,id,processSchemeId){
    $("#ArbetTable").parent().parent().parent().empty();
    $(".processDetail").css("display","");
    $('.breadcrumb').replaceWith('<ol class="breadcrumb"><li class="breadcrumb-item">订单</li><li class="breadcrumb-item open" aria-current="page"><a href="/order/loadinglist">进行中订单</a></li>');                       
    $('.content-container').ajaxUrl({'url':'/order/processDetails','data':{'orderId':id,'processSchemeId':processSchemeId}}); 
}

function processCounts(event,id){
    $("#ArbetTable").parent().parent().parent().empty();
    $(".processDetail").css("display","");
    $('.breadcrumb').replaceWith('<ol class="breadcrumb"><li class="breadcrumb-item">订单</li><li class="breadcrumb-item open" aria-current="page"><a href="/order/loadinglist">进行中订单</a></li>');                       //导航栏添加三级导航
    $('.content-container').ajaxUrl({'url':'/order/processPage','data':{'orderId':id}}); 
}

function order_list_add() {
    Ewin.dialog({
        id:'orderListAdd',
        url:'/order/list/add',
        title:'添加订单',
        width:800,
        height:600
    })
}

function order_list_edit_info(){
    if($("#ArbetTable").bootstrapTable('getSelections').length == 0){
        toastr.info('请选择要编辑的数据!');
    }else{
        Ewin.dialog({
            id:'orderUpdateInfo',
            url:'/order/updateinfoPage',
            title:'修改基本信息',
            data:$("#ArbetTable").bootstrapTable('getSelections')[0],
            width:800,
            height:600
        }) 
    }
}

function order_list_control(num){
    if($("#ArbetTable").bootstrapTable('getSelections').length == 0){
        toastr.info('请选择数据!');
    }else if(num == 2){
        $.confirm({
            icon: 'fa fa-question',
            theme: 'bootstrap',
            closeIcon: true,
            animation: 'scale',
            content: '确认要关闭吗？',
            type: 'orange',//2ecc71
            buttons: {
                    ok: {
                        text: "确定",
                        btnClass: 'btn-default',
                        keys: ['enter'],
                        action: function(){
                            $.ajax({
                                url:'/order/operateOrder',
                                type:'post',
                                data:{'orderId':$("#ArbetTable").bootstrapTable('getSelections')[0].orderId,'operate':2 },
                                dataType:'json',
                                success:function(json){
                                    if(json.statusCode == '200'){
                                        toastr.success(json.message);
                                    }else{         //300情况下
                                        toastr.error(json.message);
                                    }
                                },
                                error:function(XMLHttpRequest, textStatus, errorThrown){
                                    toastr.error(textStatus+'!');
                                }
                            })
                        }
                    },
                    cancel: {
                        text: "取消",
                        btnClass: 'btn-default',
                        keys: ['esc'],
                        action:function () {
                        }
                    }
            }
        });
    }else{
        $.ajax({
            url:'/order/operateOrder',
            type:'post',
            data:{'orderId':$("#ArbetTable").bootstrapTable('getSelections')[0].orderId,'operate':num },
            dataType:'json',
            success:function(json){
                if(json.statusCode == '200'){
                    toastr.success(json.message);
                }else{            //300情况下
                    toastr.error(json.message);
                }
            },
            error:function(XMLHttpRequest, textStatus, errorThrown){
                toastr.error(textStatus+'!');
            }
        })
    }
}
</script>